<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <!-- <script type="text/javascript" src="beijing.js"></script> -->
</head>
<style>
    #map {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid skyblue;
        width: 90vw;
        height: 100vh;
    }
</style>

<body>

    <div id="map"></div>
</body>
<script>
    var dom = document.getElementById("map");

    var myChart = echarts.init(dom);
    var provinces = [
        "shanghai",
        "hebei",
        "shanxi",
        "neimenggu",
        "liaoning",
        "jilin",
        "heilongjiang",
        "jiangsu",
        "zhejiang",
        "anhui",
        "fujian",
        "jiangxi",
        "shandong",
        "henan",
        "hubei",
        "hunan",
        "guangdong",
        "guangxi",
        "hainan",
        "sichuan",
        "guizhou",
        "yunnan",
        "xizang",
        "shanxi1",
        "gansu",
        "qinghai",
        "ningxia",
        "xinjiang",
        "beijing",
        "tianjin",
        "chongqing",
        "xianggang",
        "aomen",
        "taiwan",
    ];
    var provincesText = [
        "上海",
        "河北",
        "山西",
        "内蒙古",
        "辽宁",
        "吉林",
        "黑龙江",
        "江苏",
        "浙江",
        "安徽",
        "福建",
        "江西",
        "山东",
        "河南",
        "湖北",
        "湖南",
        "广东",
        "广西",
        "海南",
        "四川",
        "贵州",
        "云南",
        "西藏",
        "陕西",
        "甘肃",
        "青海",
        "宁夏",
        "新疆",
        "北京",
        "天津",
        "重庆",
        "香港",
        "澳门",
        "台湾",
    ];
    var option = {
        series: [
            {
                type: "map",
                roam: true,
                mapType: "china",

                itemStyle: {
                    normal: {
                        show: true,
                        areaColor: "#CECECE",
                        borderColor: "#FCFCFC",
                        borderWidth: "1",
                    },

                    emphasis: {
                        show: true,
                        areaColor: "#C8A5DF",
                    },
                },

                label: {
                    normal: {
                        show: true,
                    },
                    emphasis: {
                        show: true,
                    },
                },
            },
        ],
        title: {
            text: "点击省份查看城市数据，再次点击返回全国",
            left: "center",
        },
    };

    myChart.setOption(option);
    myChart.on("click", async function (params) {
        var provinceIndex = provincesText.findIndex((v) => {
            return v == params.name;
        });
        if (provinceIndex == -1) {
            reset()
        } else {
            await loadScript(provinces[provinceIndex] + ".js");
            option.series[0].mapType = params.name;

            setTimeout(() => {
                myChart.setOption(option, true);
            }, 100);
        }


    });
    function loadScript(url) {
        var script = document.createElement("script");
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
        script.onerror = reset()

    }

    function reset() {
        console.log("fff");
        option.series[0].mapType = "china";

        myChart.setOption(option, true);

    }
</script>

</html>